import React, { Component } from "react";
// 按需导入antd-mobile组件
import { NavBar, Toast } from "antd-mobile";
// 导入axios
import axios from "axios";
//导入样式
import "./index.scss";

// 导入获取当前城市的函数
import getCurrentCity from "../../utils";
// 导入react-virtualized的组件
import { List, AutoSizer } from "react-virtualized";

// 导入头部公共组件
import NavHeader from "../../components/NavHeader";
const topHeight = 36;
const bottomHeight = 50;

export default class CityList extends Component {
  constructor() {
    // 使用继承需要使用super()
    super();
    //创建List元素的ref引用
    this.listComponent = React.createRef();
  }
  state = {
    cityList: {},
    cityIndex: [],
    currentIndex: 0,
  };
  componentDidMount() {
    // 发送请求获取城市列表数据
    this.getList();
  }

  // 计算每一个字母代表城市的高度
  getHeight = ({ index }) => {
    const letter = this.state.cityIndex[index];
    const list = this.state.cityList[letter];
    //调用获取不同的高度的数据
    return topHeight + bottomHeight * list.length;
  };

  // 城市列表
  async getList() {
    const res = await axios.get("http://localhost:8080/area/city?level=1");

    // 改造数据
    let arrCityList = {};
    let ArrIndex = [];
    res.data.body.forEach((item) => {
      var str = item.short.substr(0, 1); //substr(初始下标, 长度)
      //将城市的各个首字母变为一个数组  去除重复的字母
      if (!ArrIndex.includes(str)) {
        ArrIndex.push(str);
      }
      // 排序

      //对象存在某个字母的属性 就加到该属性的数组后面

      if (arrCityList[str]) {
        // 加到该属性的数组后面;
        arrCityList[str].push(item);
      } else {
        //对象不存在的属性就加入新属性 且新熟悉是数组形式
        arrCityList[str] = [item];
      }
    });
    // 将获取的首字母的数组排序
    ArrIndex.sort();
    // 将#和热加到ArrIndex前面
    ArrIndex.unshift("hot");
    ArrIndex.unshift("#");

    // 城市列表前面加入当前城市和热门城市的数据
    // 获取当前城市信息
    const currentCity = await getCurrentCity();

    arrCityList["#"] = [currentCity];

    // 获取热门城市数据
    const newRes = await axios.get("http://localhost:8080/area/hot");

    // 将热门城市加到城市列表的对象里面
    arrCityList["hot"] = newRes.data.body;
    // this.hotCity(arrCityList);

    // 获取热门
    // 修改state数据
    this.setState(
      {
        cityList: arrCityList,
        cityIndex: ArrIndex,
      },
      () => {
        // 提前计算好跳转区域的高度
        this.listComponent.current.measureAllRows();
      }
    );
  }

  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    // 获取每个区域城市首字母
    let letter = this.state.cityIndex[index];
    // 获取对应字母的城市数组
    let list = this.state.cityList[letter];
    let title = "";

    switch (letter) {
      case "#":
        title = "当前定位";
        break;
      case "hot":
        title = "热门城市";
        break;
      default:
        // 将是英文字母的转为大写
        title = letter.toUpperCase();
        break;
    }
    //每个区域返回的html结构
    return (
      <div key={key} style={style} className="cityList">
        <p className="title"> {title}</p>
        {list.map((item, i) => (
          <div
            key={i}
            className="item"
            onClick={this.handleJump.bind(this, item)}
          >
            {item.label}
          </div>
        ))}
      </div>
    );
  };

  // 点击切换tab 根据匹配当前的index
  handleClick(index, e) {
    // 不需要修改右侧的高亮 只要左侧出现滚动自动会匹配index出现高亮
    // if (index !== this.state.currentIndex) {
    //   this.setState({
    //     currentIndex: index,
    //   });
    // }

    //获取List元素的实例  滚动到点击的区域
    this.listComponent.current.scrollToRow(index);
  }

  //设置右侧导航显示标记 左侧滚动到指定位置触发
  onRowsRendered = ({ startIndex }) => {
    // console.log(
    //   "overscanStartIndex, overscanStopIndex, startIndex, stopIndex ",
    //   overscanStartIndex,
    //   overscanStopIndex,
    //   startIndex,
    //   stopIndex
    // );
    // if(startIndex<){

    // }
    // 如果是相等滚动到的位置与currentIndex一致就不修改
    // if (startIndex !== this.state.currentIndex && overscanStartIndex != 0) {
    if (startIndex !== this.state.currentIndex) {
      this.setState(
        {
          currentIndex: startIndex,
        },
        () => {
          // console.log(
          //   startIndex,
          //   "startIndex",
          //   this.state.currentIndex,
          //   "this.state.currentIndex",
          //   2
          // );
        }
      );
    }
  };

  // 点击跳转到首页
  handleJump(item) {
    if (["北京", "上海", "广州", "深圳"].includes(item.label)) {
      console.log(JSON.stringify(item));
      // 将获取对应的城市信息存储到本地
      localStorage.setItem("hkzf-current-city", JSON.stringify(item));
      // 跳转到对应的城市首页
      this.props.history.go(-1);
    } else {
      // 提示无房源
      // Toast.info("提示信息", 提示显示时间, 关闭后回调, 是否显示透明蒙层，防止触摸穿透);
      Toast.info("该城市暂无房源数据", 2, null, false);
    }
  }
  render() {
    return (
      <div className="cityWrapper">
        {/* <NavBar
          mode="light"
          icon={<i className="iconfont icon-back"></i>}
          onLeftClick={() => {
            this.props.history.go(-1);
          }}
        >
          城市选择
        </NavBar> */}

        <NavHeader>城市选择</NavHeader>

        {/* 导航下面的城市选择部分 */}

        <AutoSizer>
          {/* 获取屏幕的宽高 */}
          {({ height, width }) => (
            <List
              ref={this.listComponent}
              //铺满屏幕的宽高
              width={width}
              height={height}
              //每一个区域的数量
              rowCount={this.state.cityIndex.length}
              // 每一个区域的高度
              rowHeight={this.getHeight}
              // 每个区域的渲染的内容
              rowRenderer={this.rowRenderer}
              // 根据index显示右侧高亮
              onRowsRendered={this.onRowsRendered}
              // 指定显示每行区域的位置 在开始就显示
              scrollToAlignment={"start"}
            />
          )}
        </AutoSizer>

        <ul className="navs">
          {this.state.cityIndex.map((item, index) => (
            <li
              key={index}
              // 动态显示类名
              className={"navItem"}
              onClick={this.handleClick.bind(this, index)}
            >
              <span
                className={this.state.currentIndex === index ? "active" : ""}
              >
                {item === "hot" ? "热" : item.toUpperCase()}
              </span>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
